<template>
  <div id="app" style="width: 50%;height:700px;margin: auto;padding-top: 50px">
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="text-align: center">
        <span>填写账号主页 自动完善部分资料</span>
      </div>

      <el-form ref="form" :model="infoInfluenceForm" label-width="80px" style="padding: 20px">

        <el-form-item label="Git" class="itemForm">
          <el-input v-model="infoInfluenceForm.githubUrl" class="inputForm">
            <template slot="prepend">https://github.com/</template>
          </el-input>
          <el-button type="primary" class="btnForm" @click="bindGithubUrl()">立即绑定</el-button>
        </el-form-item>


        <el-form-item label="Dribbble" class="itemForm">
          <el-input v-model="infoInfluenceForm.dribbbleUrl" class="inputForm">
            <template slot="prepend">https://developer.dribbble.com/</template>
          </el-input>
          <el-button type="primary" class="btnForm" @click="bindDribbbleUrl()">立即绑定</el-button>
        </el-form-item>


        <el-form-item label="知乎" class="itemForm">
          <el-input v-model="infoInfluenceForm.knowUrl" class="inputForm">
            <template slot="prepend">http://www.zhihu.com/</template>
          </el-input>
          <el-button type="primary" class="btnForm" @click="bindKnowUrl()">立即绑定</el-button>
        </el-form-item>


        <el-form-item label="StackOverflow" class="itemForm">
          <el-input v-model="infoInfluenceForm.stackoverflowUrl" class="inputForm">
            <template slot="prepend">https://stackoverflow.com/</template>
          </el-input>
          <el-button type="primary" class="btnForm" @click="bindStackoverflowUrl()">立即绑定</el-button>
        </el-form-item>


      </el-form>

    </el-card>

  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: "infoInfluence",
  data() {
    return {
      infoInfluenceForm: {
        githubUrl: '',
        dribbbleUrl: '',
        knowUrl: '',
        stackoverflowUrl: ''
      }
    }
  },
  methods: {
    async initInfoInfluenceForm() {
      const {data: res} = await this.$http.get('/proCommunity/proCommunity/' + this.$store.state.userId)
      this.infoInfluenceForm = res.content
    },

    async bindGithubUrl() {
      const {data: res} = await this.$http.put('/proCommunity/proCommunity', {
        githubUrl: this.infoInfluenceForm.githubUrl
      })
      if (res.code === "201") {
        Vue.prototype.$notify.success({
          title: "成功",
          message: "更新成功"
        })
      }
    },
    async bindDribbbleUrl() {
      const {data: res} = await this.$http.put('/proCommunity/proCommunity', {
        dribbbleUrl: this.infoInfluenceForm.dribbbleUrl
      })
      if (res.code === "201") {
        Vue.prototype.$notify.success({
          title: "成功",
          message: "更新成功"
        })
      }
    },
    async bindKnowUrl() {
      const {data: res} = await this.$http.put('/proCommunity/proCommunity', {
        knowUrl: this.infoInfluenceForm.knowUrl
      })
      if (res.code === "201") {
        Vue.prototype.$notify.success({
          title: "成功",
          message: "更新成功"
        })
      }
    },
    async bindStackoverflowUrl() {
      const {data: res} = await this.$http.put('/proCommunity/proCommunity', {
        stackoverflowUrl: this.infoInfluenceForm.stackoverflowUrl
      })
      if (res.code === "201") {
        Vue.prototype.$notify.success({
          title: "成功",
          message: "更新成功"
        })
      }
    }
  },
  mounted() {
    this.initInfoInfluenceForm()
  }
}
</script>

<style scoped>

.itemForm {
  width: 80%;
  height: 80px;
  margin: auto;
}

.inputForm {
  width: 500px;
}

.btnForm {
  margin-left: 10px;
}

</style>